import React, { Component } from 'react';
import '../styles/cart/ShoppingCart.scss';
import * as service from '../api/index';
import { NavBar, Stepper, Toast, Checkbox } from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
import { withRouter, NavLink } from 'react-router-dom'
import TopBox from '../components/TopBox';
import FooterBox from '../components/FooterBox';

class ShoppingCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shoplist: [],
            count: 1
        }
    }
    componentDidMount() {
        service.shopcart_list({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res.data)
            this.setState({
                shoplist: res.data.list
            })
        })
    }
    back() {
        this.props.history.go(-1);
    }
    change(id, value, count) {
        this.setState({
            count: value
        })
        console.log(id, value, this.state.count)

        if (value > this.state.count) {
            service.shopcart_add({ userid: localStorage.getItem("userid"), goodid: id }).then((res) => {
                console.log("增加", res.data)
            })
        } else if (value < this.state.count) {
            service.shopcart_sub({ userid: localStorage.getItem("userid"), goodid: id }).then((res) => {
                console.log("减少", res.data)
            })
        }
    }
    del() {
        service.shopcart_clear({ userid: localStorage.getItem("userid") }).then((res) => {
            console.log(res.data)
            service.shopcart_list({ userid: localStorage.getItem("userid") }).then((res) => {
                console.log(res.data)
                this.setState({
                    shoplist: res.data.list
                })
            })
        })
        Toast.show({
            icon: 'success',
            content: '删除成功',
        })
    }
    render() {
        return (
            <div className='ShoppingCart'>
                {/* 购物车页面 */}
                {/* 返回顶部 */}
                {<TopBox />}
                <NavBar onBack={() => { this.back() }} right={<DeleteOutline fontSize={24} onClick={() => { this.del() }} />} >购物车</NavBar>
                <div className='ShoppingCart_list'>
                    {
                        this.state.shoplist.map((item, index) => {
                            return (
                                <div className='ShoppingCart_box' key={index}>
                                    <Checkbox>
                                        {item.ischeck}
                                    </Checkbox >
                                    <img src={item.pic} alt="" />
                                    <div className='ShoppingCart_text'>
                                        <div>{item.name}</div>
                                        <div className='ShoppingCart_price'>
                                            ￥:{item.salesPrice.value}
                                            <div className='ShoppingCart_button'>
                                                <Stepper min={0} max={10} defaultValue={item.count}
                                                    onChange={(value) => {
                                                        this.change(item.id, value, item.count)
                                                    }}
                                                />
                                            </div>
                                            <div>{item.salesPrice.value * item.count}</div>
                                        </div>

                                    </div>

                                </div>
                            )
                        })
                    }
                    {
                        this.state.shoplist.length === 0 && <div className="empty">购物车里什么都没有,快去商城看看吧<NavLink to="/home/AllCommodities">去店铺</NavLink>
                        </div>
                    }
                </div>
                <FooterBox />
            </div>
        );
    }
}

export default withRouter(ShoppingCart);